<template>
  <div class="sl_order_card__container base-padding" :class="{'current': current}">
    <div class="flex-left">
      <h5><span>{{ title }}</span></h5>
      <p><span>{{ desc }}</span></p>
      <small v-for="item in small">{{ item }}</small>
      <small>用车时间: {{ carUseTime | formatTime }}</small>
    </div>
    <div class="flex-right">
      <h5>￥{{ price }}元</h5>
      <p>{{ state }}</p>
      <p>{{ source }}</p>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'sl-order-card',
    props: {
      title: String,
      desc: String,
      carUseTime: '',
      small: Array,
      price: [String, Number],
      state: String,
      source: String,
      current: {
        type: Boolean,
        default: false
      }
    },
    filters: {
      formatTime (carUserTime) {
        return moment(carUserTime).format('YYYY-MM-DD hh:mm')
      }
    },
    methods: {

    }
  }
</script>

<style lang="stylus" type="text/stylus" scoped>
  @import "~assets/css/theme"

  .sl_order_card__container
    display flex
    justify-content space-between
    padding-top 1 * .61rem
    padding-bottom 1 * .61rem
    background #fff
    margin-bottom 10px
    > div
      &.flex-left
        display flex
        align-content space-between
        flex-wrap wrap
        min-height 80px
        width 70%
        h5
          font-size 1.6 * .61rem
          line-height 24px
          span
            overflow hidden
            text-overflow ellipsis
            -webkit-line-clamp 1
            white-space nowrap
            display: block
        p
          color #777
          span
            overflow hidden
            text-overflow ellipsis
            -webkit-line-clamp 1
            white-space nowrap
            display: block
        small
          color #777
          font-size $sl_font_size_small
        > *
          width 100%
          text-align left
      &.flex-right
        display flex
        align-content space-between
        flex-wrap wrap
        h5
          color #f60
          font-size $sl_font_size_16
        p:nth-child(2)
          color #f60
        > *
          width 100%
          text-align right
    &.current
      .flex-left
        padding-left 2 * .61rem
        h5
          font-size 1.6 * .61rem
          color $sl_font_color_default
          position relative
          &::before
            content ''
            display block
            width .8 * .61rem
            height .8 * .61rem
            border-radius 50%
            position absolute
            left -2 * .61rem
            top 50%
            transform translateY(-50%)
            background #46a1bb
        p
          font-size 1.4 * .61rem
          color $font_color_default
          position relative
          &:nth-child(2)::before
            content ''
            display block
            width .8 * .61rem
            height .8 * .61rem
            border-radius 50%
            position absolute
            left -2 * .61rem
            top 50%
            transform translateY(-50%)
            background #ff9800
      .flex-right
        >*
          font-size $sl_font_size_small
        h5
          font-size $sl_font_size_14
</style>
